<template>
  <transition name="fade">
    <div class="popup" v-show="visible" @click="$emit('update:visible',false)">
      <transition name="fade-transform">
        <div class="popup_card" v-show="cardShow">
          <slot/>
        </div>
      </transition>
    </div>
  </transition>
</template>

<script>
export default {
  name: "index",
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      cardShow: true
    }
  },
  watch: {
    visible(val) {
      this.cardShow = val
    }
  }
}
</script>

<style lang="less">
.fade-enter-active, .fade-leave-active {
  transition: opacity .3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
.fade-transform-enter-active, .fade-transform-leave-active {
  opacity: 1;
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
  -webkit-transition: opacity .5s cubic-bezier(.23, 1, .32, 1), -webkit-transform .5s cubic-bezier(.23, 1, .32, 1);
  transition: transform .5s cubic-bezier(.23, 1, .32, 1), opacity .5s cubic-bezier(.23, 1, .32, 1), -webkit-transform .5s cubic-bezier(.23, 1, .32, 1);
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom
}

.fade-transform-enter, .fade-transform-leave-active {
  opacity: 0;
  -webkit-transform: scaleY(0);
  transform: scaleY(0)
}

.popup {
  z-index: 2000;
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  .popup_card {
    background-color: #fff;
    box-sizing: border-box;
    padding: 30px;
    width: 100%;
    position: fixed;
    bottom: 0;
    border-radius: 25px 25px 0 0;
  }
}
</style>
